<script type="text/javascript">
    $(document).ready(function(){        
        // Increase Font Size
        $(".increaseFont").click(function(){
            var currentFontSize = $('div').css('font-size');
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            if(currentFontSizeNum < 14)
            {
                var sum = currentFontSizeNum + 1; 
                var sum2 = sum + 'px';
            }
            
            //var currentFontSizeNum = parseFloat(currentFontSize, 10);
            //var newFontSize = currentFontSizeNum*1.2;
            $('div').css('font-size', sum2);
            $('span').css('font-size', sum2);
            return false;
        });
        // Decrease Font Size
        $(".decreaseFont").click(function(){
            var currentFontSize = $('div').css('font-size');
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            if(currentFontSizeNum > 8)
            {
                var sum = currentFontSizeNum - 1; 
                var sum2 = sum + 'px';
            }
            //var currentFontSize = $('html').css('font-size');
            //var currentFontSizeNum = parseFloat(currentFontSize, 10);
            //var newFontSize = currentFontSizeNum*0.8;
            $('div').css('font-size', sum2);
            $('span').css('font-size', sum2);
            return false;
        });
    });
</script>
<div id="header">
    <div style="width:1000px; height:130px; background-image:url(images/header.png)">
        <div style="width:240px;float:right; margin-top: 5px;">
            <span style="font-family:Tahoma; font-size:10pt; color:#000;"> Welcome ${actionBean.context.userName}</span> | <span style="font-family:Tahoma; font-size:10pt; color:#000; cursor: pointer;"><a href="index.jsp" style="text-decoration: none; font-family:Tahoma; font-size:10pt; color:#000; cursor: pointer;">Log off</a></span>
            <div style="background-image:url(images/bg_menu.png); color:#FFF; margin-top:15px; width:190px; height:20px; float:right; padding-top: 5px; padding-bottom: 2px; padding-left: 10px; margin-right: 40px; border-radius:34px;"><a style="color:#FFF; text-decoration: none;" href="ContrastOn.jsp">Contrast On</a> | Text Size <a class="increaseFont" style="color:#FFF; text-decoration: none;" href="javascript:void();"><img alt="" src="images/text-bigger.gif" border="0" /></a>  <a class="decreaseFont" style="color:#FFF; text-decoration: none;" href="javascript:void();"><img alt="" src="images/text-smaller.gif" border="0" /></a></div>
        </div>
    </div>
    <!-- class="selectopt" <img id="headerleft2" style="margin-left:10px" alt="" src="images/header.png" border="0" />-->

    <div class="horizontalHeader">
        <ul>
            <li><a href="LoginSimulation.action">Home </a></li><!-- ${actionBean.context.userId} -->
            <li><a href="#">Search</a></li>
            <c:if test="${title!='Group Dashboard' && title!='Welcome Screen' && title!='Login Simulation'}">
                <li><a class="selectopt" href="ResourceDetail.action?resourceId=101">Resources</a></li>   
            </c:if>   
            <c:if test="${title=='Group Dashboard' || title=='Welcome Screen' || title=='Login Simulation'}">
                <li><a href="ResourceDetail.action?resourceId=101">Resources</a></li>   
            </c:if>   
            <li><a href="#">Maps</a></li>
            <li><a href="#">Publication</a></li>
            <li><a href="#">Global Statistics</a></li>
            <li><a href="#">Statistics</a></li>
            <li><a href="#">Profiles</a></li>
            <c:if test="${title=='Group Dashboard' || title=='Welcome Screen'}">
                <li><a class="selectopt" href="WelcomeScreen.action">Groups</a></li>    
            </c:if>
            <c:if test="${title!='Group Dashboard' && title!='Welcome Screen'}">
                <li><a href="WelcomeScreen.action">Groups</a></li>    
            </c:if>       
            <li><a href="#">Help</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
    <br/>
    <!-- end #header --></div>
